<template>
	<view class="page">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" activeStyle="color:#3c9cff" lineWidth="60" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="content1" v-if="current == 0">
			<view class="item" @click="goToUrl('/pages/products/productDetail04')">
				<u--image :showLoading="true"
					src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/fdjz.png" width="260rpx"
					height="260rpx"></u--image>
				<view class="right">
					<view class="top">
						<!-- <view class="text">适配</view> -->
						<u--text text="发电机组系列" size=16 :lines="1"></u--text>
					</view>
					<view class="middle">
						<view class="mItem">
							<u--text text="1年" align="center" size=12></u--text>
							<u--text text="质保期" align="center" color="#767676" size=10></u--text>
						</view>
						<view class="mItem">
							<u--text text="原厂配套" align="center" size=12></u--text>
							<u--text text="产品类型" align="center" color="#767676" size=10></u--text>
						</view>
						<view class="mItem">
							<u--text text="高效发电" align="center" size=12></u--text>
							<u--text text="功能特征" align="center" color="#767676" size=10></u--text>
						</view>
					</view>
					<view class="bottom">
						<u--text text="￥" color="#F21E46"></u--text>
						<u--text text="888" color="#F21E46" size=26 lineHeight="1em"></u--text>
						<u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text>
						<u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="current == 1">1</view>
		<view class="content" v-if="current == 2">2</view>
		<view class="content" v-if="current == 3">3</view>
		<view class="content" v-if="current == 4">4</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			current: 0,
			list:
				[{
					name: '品牌',
				}, {
					name: '销售政策',
				}, {
					name: '融资租赁'
				}, {
					name: '质保服务'
				}, {
					name: '推荐有礼'
				}
				]
		}
	},
	methods: {
		change(index) {
			console.log(index)
			this.current = index.index
		}

	}
}

</script>
<style lang="scss" scoped>
.content1 {
	padding: 30rpx 26rpx;

	.item {
		display: flex;
		background-color: white;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.right {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		padding: 20rpx 0;

		.top {
			display: flex;

			.text {
				background-color: #3662EC;
				color: white;
				padding: 0 6rpx;
				border-radius: 20rpx;
			}
		}

		.middle {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.mItem {
				display: flex;
				flex-direction: column;
				flex: 1;
			}

			.mItem:nth-of-type(2) {
				border-left: 1px #D8D8D8 solid;
				border-right: 1px #D8D8D8 solid;
			}
		}

		.bottom {
			display: flex;
			width: 380rpx;
			margin-top: auto;

			::v-deep .u-text__value {
				white-space: nowrap !important;
				align-self: flex-end;
			}

			::v-deep .u-text {
				flex: 0;
			}

			::v-deep .u-icon {
				margin-left: auto;
			}
		}
	}
}
</style>
